<template>
  <a-layout-header class="new-nav-bar">
    <div class="logo-container">Noodle系统</div>
    <div class="tab-container"
         @click="switchTab">
      <div :class="['tab-item', curPage === 'teacher' ? 'active' : '']">教师管理</div>
      <div :class="['tab-item', curPage === 'student' ? 'active' : '']">学员管理</div>
    </div>
    <div class="user-container">
      <user-avatar />
    </div>
  </a-layout-header>
</template>

<script>
import UserAvatar from "@/components/common/UserAvatar"

export default {
  name: "NewNavBarAdmin",
  data () {
    return {
    };
  },
  computed: {
    curPage: function () {
      return this.$route.params.type;
    },
  },
  components: {
    UserAvatar,
  },
  methods: {
    switchTab (e) {
      const type = e.target.innerText === "教师管理" ? "teacher" : "student";
      if(this.$route.params.type!==type){
        this.$router.push("/admin/" + type);
        this.$emit("changeTab",type)
      }
    }
  },
  watch:{
    //url改变
    curPage:{
      immediate: true,
      handler (val) {
        // console.log("watchcur", val)
        this.$emit("changeTab",val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/global.less";

.new-nav-bar {
  background: transparent;
  position: fixed;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 90px;
  line-height: 90px;
  padding: 0;
  align-items: center;

  .logo-container {
    font-family: PingFang SC, sans-serif;
    font-weight: bold;
    color: #000000;
    font-size: 18px;
    line-height: 26px;

    width: 12.5%;
    margin-left: 2.5%;
  }

  .tab-container {
    flex: 1;
    height: 25px;
    font-size: 18px;
    font-family: PingFang SC, sans-serif;
    font-weight: 400;
    line-height: 25px;
    .tab-item {
      display: inline;
      color: #929292;
      margin-right: 54px;
    }
    .tab-item:hover {
      cursor: pointer;
    }
    .active {
      color: #1bd0a2;
    }
  }
  .user-container {
    justify-self: right;
    margin-right: 2%;
    .user-detail {
      display: flex;
      justify-content: center;
      align-items: center;
      .user-name {
        margin-left: 10px;
      }
    }
  }
}
.logout {
  color: @btn-danger-bg;
}
</style>

